<!-- Main Header -->
<header class="main-header">
	<!-- Logo -->
	<app-logo></app-logo>
	<!-- Header Navbar -->
	<nav class="navbar navbar-static-top" role="navigation">
		<!-- Sidebar toggle button-->
		<a class="sidebar-toggle" data-toggle="offcanvas" role="button">
			<!-- ADMIN LTE 2.4.0  <a class="sidebar-toggle" data-toggle="push-menu" role="button"> -->
      <span class="sr-only">Toggle navigation</span>
		</a>
		<!-- Navbar Right Menu -->
		<div class="navbar-custom-menu">
			<ul class="nav navbar-nav" >
				<!-- Messages: style can be found in dropdown.less-->
				<li class="dropdawn messages-menu messagesBox" *ngIf="display_messages"></li>
				<!-- Notifications Menu -->
				<li class="dropdown notifications-menu notificationsBox" *ngIf="display_notifications"></li>
				<!-- Tasks Menu -->
				<li class="dropdown tasks-menu tasksBox" *ngIf="display_tasks"></li>
				<!-- User Account Menu -->
        <li class="dropdown user user-menu userBox" *ngIf="display_user">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="assets/img/user2-160x160.jpg" class="user-image" alt="User Image">
            <span class="hidden-xs">{{currentUser?.getName()}}</span>
          </a>
          <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
              <img [src]="currentUser?.avatarUrl" class="img-circle" alt="User Image">

              <p>
                {{currentUser?.getName()}}
                <small>Member since Nov. 2012</small>
              </p>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
              <div class="pull-left">
                <a href="#" class="btn btn-default btn-flat">Profile</a>
              </div>
              <div class="pull-right">
                <button  class="btn btn-default btn-flat" (click)="logout()">Sign out</button>
              </div>
            </li>
          </ul>
        </li>
				<!-- Additionnal components -->
				<!--<ng-container *ngFor="let widget of header_components">-->
					<!--<li>-->
						<!--<app-component-loader [class_component]="widget.class" [data]="widget.data"></app-component-loader>-->
					<!--</li>-->
				<!--</ng-container>-->
			</ul>
		</div>
	</nav>
</header>
